<template>
  <div class="common-layout">
    <el-container>
      <vip> </vip>
      <el-main class="mb-20 container">
        <el-card shadow="always">
          <transition>
            <div class="outer">
              <div class="py-container" v-show="!show3">
                <div class="clearfix selector">
                  <div class="type-wrap logo">
                    <cardList
                      :courseList="courseList"
                      :getVideoList="getVideoList"
                    ></cardList>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-card>
        <el-card shadow="always" class="flex-always">
          <el-row :gutter="12" class="flex-grow">
            <el-col :span="2"
              ><span class="sort" @click="clickSort">综合</span></el-col
            >
            <el-col :span="3"
              ><span class="sales" @click="clickSales">销量</span>
            </el-col>
            <el-col :span="3">
              <span class="browse" @click="clickBrowse">浏览量</span></el-col
            >
            <el-col :span="3">
              <el-col>
                <el-dropdown>
                  <span class="el-dropdown-link" style="font-size: initial">
                    价格<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        ><span @click="priceHigh"
                          >价格由高到低</span
                        ></el-dropdown-item
                      >
                      <el-dropdown-item
                        ><span @click="priceLow"
                          >价格由低到高</span
                        ></el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-col>
            </el-col>
            <el-col :span="3"
              ><span class="time" @click="clickTime">发布时间</span></el-col
            >
          </el-row>
        </el-card>
      </el-main>
      <el-footer v-loading="loading" class="container mb-20 footer">
        <div class="footer_flex" v-for="item in videoList" :key="item?.id">
          <div class="footer_video">
            <div class="cover">
              <div class="footer_video_img">
                <img
                  class="footer_image"
                  style="width: 224px; height: 125px"
                  :src="item?.cover[0]"
                  alt=""
                />
                <img
                  src="//rs.dance365.com/img/release_play@3x.fb313c4d.png"
                  class="play_icon"
                />
                <div class="subject_card">视频课</div>
              </div>
            </div>
            <div class="moment_detail">
              <div class="card_detail">
                <div
                  title="零基础古典身韵元素组合"
                  class="title"
                  style="cursor: pointer"
                >
                  <div
                    data-v-4af3de0e=""
                    class="example"
                    data-ellipsis-id="16781"
                  >
                    <a
                      style="text-decoration: none; color: black"
                      data-v-4af3de0e=""
                      href="/detail/video_course?momentId=a521a8a598774d839f29f674f0028488"
                      target="_blank"
                      class="differ-viewed ellipsis-content"
                    >
                      {{ item.title }}
                    </a>
                  </div>
                </div>
                <div class="viewCount isVipFreeCustom">
                  <div class="price" style="line-height: 14px">
                    <div>
                      <span style="font-size: 14px">￥</span>
                      {{ item.commodityBackup.price }}
                    </div>
                  </div>
                  <span class="num">
                    {{ item.statisticsBackup.viewCount }}人浏览
                  </span>
                </div>
                <div class="interrelated_info vip_free">
                  <div class="vip_free_icon"></div>
                  <span>
                    <img
                      class="span_img"
                      style="width: 15px"
                      src="./images/点赞 (1).svg"
                      alt=""
                    />
                    <span class="span_img_span">{{
                      item.statisticsBackup.praiseCount
                    }}</span>
                  </span>
                  <span>
                    <img
                      class="span_img"
                      style="width: 15px"
                      src="./images/对话信息.svg"
                      alt=""
                    />
                    <span class="span_img_span">{{
                      item.statisticsBackup.commentCount
                    }}</span>
                  </span>
                  <span>
                    <img
                      class="span_img"
                      style="width: 15px"
                      src="./images/形状-星形.svg"
                      alt=""
                    />
                    <span class="span_img_span">{{
                      item.statisticsBackup.favoriteCount
                    }}</span>
                  </span>
                </div>
              </div>
              <div class="creator_info">
                <div class="left" style="max-width: 113px">
                  <img
                    style="width: 20px; border-radius: 100%"
                    :src="item.creatorBackup.avatar"
                    alt=""
                  />
                  <span
                    data-v-4af3de0e=""
                    title="中舞联盟"
                    class="creator_name"
                    style="max-width: 68px"
                    >中舞联盟</span
                  >
                  <img
                    src="https://rs.dance365.com/authenticate_organ@3x.png"
                    class="certified_icon certified_icon not_overflow_title"
                    style="width: 10px"
                  />
                </div>
                <span title="2019年 01月 31日" class="uploadTime">{{
                  time(item.createTime)
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="loading" style="display: none" ref="loading">
          <span>正在加载更多数据</span>
        </div>
        <div class="text" style="display: none" ref="text">
          <span>没有更多数据啦</span>
        </div> -->
      </el-footer>
      <div class="loadMore" @click="loadMore">加载更多</div>
    </el-container>
  </div>
</template>
<script lang="ts">
import vip from "./vip/index.vue";
import cardList from "./cardList/index.vue";
import { ref, onMounted, reactive } from "vue";
import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus,
} from "@element-plus/icons-vue";
import courseApi from "@/api/course";
import videoApi from "@/api/course/videoCourse";
</script>
<script lang="ts" setup>
type choiseModel = {
  groupType?: string;
  name: string;
  id: string;
};
type MainListModel = {
  choises: choiseModel[];
  formType: string;
  label: string;
  name: string;
  style: string;
  valueType: string;
};
const loading = ref<boolean>(false);
const show3 = ref(false);
const courseList = ref<MainListModel[]>([]);
const pageNum = ref(0);
const pageSize = ref(20);
const videoList = ref();
// const retractRef = ref<null | HTMLElement>(null);
//处理时间戳
function time(time3: number) {
  var date = new Date(time3);
  var Y = date.getFullYear() + "-";
  var M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
  var strDate = Y.slice(2) + M + D;
  return strDate;
}

// const getPageData =()=>{
//   if(pageNum.value)
// }
const getList = async () => {
  videoApi.getVideoList(pageSize.value, pageNum.value);
};
const getCourseList = async () => {
  const result = await courseApi.getMainList();
  courseList.value = result;
  // console.log(result);
};
const loadingTimeOut = () => {
  ++pageNum.value;
  loading.value = true;
  getVideoList();
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
const getVideoList = async () => {
  const res = await courseApi.getVideoList(pageSize.value, pageNum.value);
  videoList.value = res.content;
  // console.log(res.content);
};
const getPriceHigh = async () => {
  const res = await courseApi.getPriceHigh(pageSize.value, pageNum.value);
  videoList.value = res.content;
};
const getPriceLow = async () => {
  const res = await courseApi.getPriceLow(pageSize.value, pageNum.value);
  videoList.value = res.content;
};
const clickSort = () => {
  pageNum.value = 0;
  loading.value = true;
  getVideoList();
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  const sort = document.querySelector(".sort");
  sort!.innerHTML = "综合排序";
  document.querySelector(".sales")!.innerHTML = "销量";
  document.querySelector(".browse")!.innerHTML = "浏览量";
  document.querySelector(".time")!.innerHTML = "发布时间";
};
const clickSales = () => {
  loadingTimeOut();
  document.querySelector(".sales")!.innerHTML = "销量由高到低";
  document.querySelector(".sort")!.innerHTML = "综合";
  document.querySelector(".browse")!.innerHTML = "浏览量";
  document.querySelector(".time")!.innerHTML = "发布时间";
};
const clickBrowse = () => {
  loadingTimeOut();
  document.querySelector(".browse")!.innerHTML = "浏览量由高到低";
  document.querySelector(".sales")!.innerHTML = "销量";
  document.querySelector(".sort")!.innerHTML = "综合";
  document.querySelector(".time")!.innerHTML = "发布时间";
};
const clickTime = () => {
  loadingTimeOut();
  document.querySelector(".time")!.innerHTML = "发布时间由近及远";
  document.querySelector(".sales")!.innerHTML = "销量";
  document.querySelector(".sort")!.innerHTML = "综合";
  document.querySelector(".browse")!.innerHTML = "浏览量";
};
const priceHigh = () => {
  getPriceHigh();
};
const priceLow = () => {
  getPriceLow();
};
//点击加载跟多
function loadMore() {
  pageNum.value += 1;
  courseApi.getVideoList(pageSize.value, pageNum.value).then((res) => {
    res.content.forEach((v: any) => {
      videoList.value.push(v);
    });
  });
}
//浏览器滚动的事件函数
function windowScrollListener() {
  //获取操作元素最顶端到页面顶端的垂直距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // windowHeight是可视区的高度
  var windowHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  // scrollHeight是滚动条的总高度
  var scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;
  // 滚动条到底部
  if (scrollTop + windowHeight == scrollHeight) {
    // 到了底部之后想做的操作,如到了底部之后加载
    pageNum.value += 1;
    courseApi.getVideoList(pageSize.value, pageNum.value).then((res) => {
      res.content.forEach((v: any) => {
        videoList.value.push(v);
      });
    });
    window.removeEventListener("scroll", windowScrollListener);
  }
}
onMounted(() => {
  getCourseList();
  getVideoList();
  getList();
  //绑定浏览器的滚动事件
  window.addEventListener("scroll", windowScrollListener);
});
</script>
<style scoped>
/* 加载更多开始 */
.loadMore {
  text-align: center;
  line-height: 40px;
  color: #82858e;
  font-size: 14px;
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 33px;
  margin-bottom: 56px;
  cursor: pointer;
  width: 140px;
  height: 40px;
  background: #fff;
}
/* 加载更多结束 */
.outer .main {
  margin: 10px 0;
  height: 100%;
  position: relative;
}
.outer .main .py-container {
  width: 100%;
  margin: 0 auto;
}
.outer .main .py-container .bread {
  margin-bottom: 5px;
  overflow: hidden;
}
.outer .main .py-container .bread .sui-breadcrumb {
  padding: 3px 15px;
  margin: 0;
  font-weight: 400;
  border-radius: 3px;
  float: left;
}
.outer .main .py-container .bread .sui-breadcrumb li {
  display: inline-block;
  line-height: 18px;
}
.outer .main .py-container .bread .sui-breadcrumb li a {
  /* color: #666; */
  text-decoration: none;
}
.outer .main .py-container .bread .sui-breadcrumb li a:hover {
  color: #4cb9fc;
}
.outer .main .py-container .bread .sui-tag {
  margin-top: -5px;
  list-style: none;
  font-size: 0;
  line-height: 0;
  padding: 5px 0 0;
  margin-bottom: 18px;
  float: left;
}
.outer .main .py-container .bread .sui-tag .with-x {
  font-size: 12px;
  margin: 0 5px 5px 0;
  display: inline-block;
  overflow: hidden;
  color: #000;
  background: #f7f7f7;
  padding: 0 7px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #dedede;
  white-space: nowrap;
  transition: color 400ms;
  cursor: pointer;
}
.outer .main .py-container .bread .sui-tag .with-x i {
  margin-left: 10px;
  cursor: pointer;
  font: 400 14px tahoma;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.outer .main .py-container .bread .sui-tag .with-x:hover {
  color: #28a3ef;
}
.outer .main .py-container .selector {
  /* border: 1px solid #ddd; */
  margin-bottom: 5px;
  overflow: hidden;
}
.outer .main .py-container .selector .logo {
  border-top: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.outer .main .py-container .selector .logo .key {
  padding-bottom: 20px !important;
}
.outer .main .py-container .selector .type-wrap {
  color: #b1b5c1;
  margin: 0;
  position: relative;
  /* border-top: 1px solid #ddd; */
  overflow: hidden;
}
.outer .main .py-container .selector .type-wrap .key {
  width: 100px;
  /* background: #f1f1f1; */
  line-height: 26px;
  text-align: left;
  padding: 10px 10px 0 15px;
  float: left;
}
.outer .main .py-container .selector .type-wrap .value {
  overflow: hidden;
  padding: 10px 0 0 0px;
  color: #333;
  margin-left: 100px;
  padding-right: 20px;
}
.outer .main .py-container .selector .type-wrap .value .logo-list li {
  /* width:100%; */
  cursor: pointer;
  float: left;
  margin: -1px -1px 0 0;
  width: 95px;
  height: 50px;
  text-align: left;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* font-weight: 700; */
  /* color: #e1251b; */
  /* font-style: italic; */
  font-size: 14px;
  color: #7d8090;
}
.outer .main .py-container .selector .type-wrap .value .logo-list li img {
  max-width: 100%;
  vertical-align: middle;
}
.outer .main .py-container .selector .type-wrap .value .type-list li {
  float: left;
  display: block;
  margin-right: 30px;
  line-height: 26px;
}
.outer .main .py-container .selector .type-wrap .value .type-list li a {
  text-decoration: none;
  color: #666;
}
.resert {
  color: red;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 15px;
}
.getAll {
  color: red;
  cursor: pointer;
}
* {
  padding: 0;
  margin: 0;
}
.container {
  width: 1200px;
  margin: 0 auto;
  display: block;
  clear: both;
}
.el-card[data-v-b801718e] {
  margin-bottom: 0px;
}
.el-card.is-always-shadow {
  position: relative;
  /* margin: 0 auto; */
  text-align: center;
}

.el-card_body {
  margin-top: 20px;
}
.vip_span {
  font-size: 16px;
  flex: 1;
  font-weight: 400;
}
.flex-grow {
  flex-grow: 1;
}
.flex-always {
  margin-top: 10px;
}
.el-menu--horizontal > .el-menu-item {
  font-size: larger;
}
.el-main {
  margin: 20px;
  margin: 0 auto;
}
.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100px;
  /* font-size: larger; */
}

.el-card {
  margin-bottom: 20px;
}
.footer-video {
  width: 1200px;
  display: flex;
  flex: 1;
}
.el-col-2 {
  cursor: pointer;
}
.el-col-3 {
  cursor: pointer;
}
.footer {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  /* flex-direction: row; */
}
.footer_flex {
  /* width: 1200px; */
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.footer_video {
  width: 219px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  height: auto;
  /* margin-right: 13px; */
}
.footer_video .cover {
  width: 224px;
  height: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer_video .cover .footer_video_img {
  position: relative;
  width: 224px;
  height: 100%;
  background-position: 50%;
  background-size: cover;
  overflow: hidden;
}
.footer_video .cover .footer_video_img .footer_image {
  border-radius: 4px;
  height: 100%;
}

.play_icon {
  position: absolute;
  bottom: 8px;
  left: 10px;
  display: inline-block;
  width: 30px;
  height: 30px;
}
.subject_card {
  position: absolute;
  color: #fff;
  right: 10px;
  bottom: 12px;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
}
.moment_detail {
  width: 100%;
  color: #b1b5c1;
  height: 155px;
}
.card_detail {
  width: 224px;
  /* padding-right: 10px;
  padding-left: 10px; */
  padding-bottom: 13px;
  border-bottom: 1px solid #ebeced;
  background-color: white;
  height: 104px;
}
.title {
  padding-left: 10px;
  font-size: 14px;
  padding-top: 10px;
  /* padding-bottom: 0; */
  line-height: 18px;
  height: 45px;
  /* width: 100%; */
  flex-wrap: wrap;
}
.viewCount {
  font-size: 12px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}
.isVipFreeCustom {
  height: 32px;
  line-height: 22px;
  padding-bottom: 7px;
}
.price {
  color: #f93684;
  font-size: 16px;
  transform: translateY(-2px);
  margin-left: 10px;
}
.num {
  word-break: keep-all;
  margin-right: 10px;
}
.interrelated_info {
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 12px;
  height: 28px;
  line-height: 12px;
}
.vip_free {
  padding-bottom: 6px;
}
.vip_free_icon {
  position: absolute;
  left: 0;
  top: -12px;
  display: inline-block;
  width: 38px;
  height: 14px;
  background: url(https://rs.dance365.com/vip_free@3x.png);
  background-size: cover;
  margin-left: 10px;
}
.span_img {
  padding-left: 10px;
  padding-bottom: 0px;
}
.span_img_span {
  position: relative;
  left: 2px;
  bottom: 2px;
}
.creator_info {
  width: 224px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 50px;
  padding-left: 16px;
  position: relative;
  font-size: 12px;
  background-color: white;
}
.left {
  display: flex;
  -webkit-box-align: center;

  align-items: center;
}
.creator_name {
  color: #111;
  cursor: pointer;
  margin-left: 8px;
  max-width: 68px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.uploadTime {
  padding-right: 8px;
  transform: translateY(1px);
  color: white;
}
.el-footer {
  --el-footer-padding: 0px;
}
.el-main {
  --el-main-padding: 0px;
  margin-bottom: 20px;
}
.el-header {
  margin-bottom: 20px;
}
.el-container.is-vertical {
  background-color: #f5f7f9 !important;
}
.el-card.is-always-shadow {
  border: 0;
}
</style>
